<template>
  <div>
    <div class="page_title">参建单位信息维护录入{{ }}</div>
    
    <el-form ref="ruleFormRef" :rules="rules" :model="formData">
    <div class="container">
      <div class="form">
        <div class="formtitle">认证基本信息{{}}</div>
        <div class="content">
          <el-form-item label="信用代码" prop="unifiedCreditCode">
            <el-input v-model="formData.unifiedCreditCode" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="单位名称"  prop="enterpriseName">
            <el-input v-model="formData.enterpriseName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="单位地址"  prop="address">
            <el-input v-model="formData.address" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="所属领域" prop="belongDomain">
            <el-select v-model="formData.belongDomain" placeholder="请选择" clearable>
              <el-option v-for="item in belongDomain" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="formData.contact" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="formData.telephone" placeholder="请输入" clearable />
          </el-form-item>
        </div>
      </div>
      <div class="form">
        <div class="formtitle">计量器具信息{{}}</div>
        <div class="box">
          <span>计量器具总数：110 </span>
          <span>强检计量器具数：10 </span>
          <span>非强检计量器具数：100 </span>
        </div>
        <FormTable :name="table.name" :tableButton="table.button" :tableData="table.tableData" :columns="table.columns"
          :hasPagination="false" @changeTableData="changeTableData" style="margin: 0 12px;">
          <template #tableButtons>
            <div>
              <el-button type="primary" @click="qijuDialog = true">获取强检数据</el-button>
            </div>
          </template>
        </FormTable>
        <el-form-item label="非强检器具数" style="margin-left: 12px;">
          <el-input v-model="formDataBottom.improvementContent" placeholder="请输入" style="width: 200px;" />
        </el-form-item>
        <el-divider/>
        <div class="para">
          监管风险等级:
          <el-radio-group v-model="formDataBottom.riskLevel" style="margin-left: 12px;">
            <el-radio value="A" size="large">A</el-radio>
            <el-radio value="B" size="large">B</el-radio>
            <el-radio value="C" size="large">C</el-radio>
            <el-radio value="D" size="large">D</el-radio>
          </el-radio-group>
        </div>
        <div class="para">
          是否公示诚信计量自我承诺:
          <el-radio-group v-model="formDataBottom.promise" style="margin-left: 12px;">
            <el-radio value="1" size="large">是</el-radio>
            <el-radio value="0" size="large">否</el-radio>
          </el-radio-group>
        </div>
        <div class="para">
          <div>需改进内容:</div>
          <el-input v-model="formDataBottom.improvementContent" maxlength="300" style="width: 70%; margin: 12px 0"
            placeholder="请输入" show-word-limit rows="4" type="textarea" />
        </div>
        <div class="para">
          <div>备注:</div>
          <el-input v-model="formDataBottom.remark" maxlength="300" style="width: 70%; margin: 12px 0" placeholder="请输入"
            show-word-limit rows="4" type="textarea" />
        </div>
      </div>
    </div>
    <div class="button">
      <el-button @click="">取消</el-button>
      <el-button type="primary" @click="submit">
        提交
      </el-button>
    </div>
  </el-form>
    <el-dialog v-model="qijuDialog" width="320px" title="新增器具" :before-close="handleClose">
      <el-form :inline="true" :model="qijuData" class="demo-form-inline">
        <el-form-item label="器具名称">
          <el-input v-model="qijuData.instrumentName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="用途">
          <el-input v-model="qijuData.purpose" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="是否强检" style="display: flex;align-items: center;">
          <el-radio-group v-model="qijuData.imperative">
            <el-radio value="0" size="large">否</el-radio>
            <el-radio value="1" size="large">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="qijuData.telephone" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="检定日期">
          <el-date-picker v-model="qijuData.validityPeriod" type="date" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="检定有效期">
          <el-date-picker v-model="qijuData.verificationDate" type="date" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="使用状态" style="display: flex;align-items: center;">
          <el-radio-group v-model="qijuData.activeState">
            <el-radio value="0" size="large">停用</el-radio>
            <el-radio value="1" size="large">在用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="qijuDialog = false">取消</el-button>
          <el-button type="primary" @click="addQijuToList">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script name="list-two" setup>
import { submitUnit } from '@/api/company'
import { useRoute, useRouter } from "vue-router";
import { queryQijuList, addQiju, addCommit, queryCommit } from '@/api/rzsq'
import { belongDomain } from "@/utils/enum";
import { ElMessage, ElLoading } from 'element-plus'
const router = useRouter()
const route = useRoute();
import FormTable from "@/components/FormTable/index.vue";
let formData = reactive({})
let formDataBottom = reactive({})
let qijuData = reactive({})
let applicationId = route.query.applicationId
let qijuDialog = ref(false)
const submit = () => {
  formData.applicationId = applicationId
  Promise.all([submitUnit(formData), addCommit(formDataBottom), addQiju(qijuData)]).then((values) => {
    ElMessage({
      message: '新增成功',
      type: 'success',
    })
    goToDetail()
  })
}
function addQijuToList() {
  let queryParams = { "pageNum": 1, "pageSize": 1000, "groups": [], "rules": [], "orderBys": [] }
  addQiju(qijuData).then(res => {
    if (res.code == "0") {
      ElMessage({
        message: '新增成功',
        type: 'success',
      })
      qijuDialog.value = false
      queryQijuList(queryParams)
    }
  })
}
const goToDetail = (prop) => {
  router.push({ path: "/rzsq/detail", query: { tab: 'canjian',id : applicationId} });
}
let requiredRule = { required: true, message: '必填', trigger: 'blur' }
const rules = reactive({
  unifiedCreditCode: [
    requiredRule
  ],
  enterpriseName: [
    requiredRule
  ],
  applicantName: [
    requiredRule
  ], belongDomain: [
    requiredRule
  ], address: [
    requiredRule
  ], contact: [
    requiredRule
  ], telephone: [
    requiredRule
  ], contactNumber: [
    requiredRule
  ], mail: [
    requiredRule
  ], fax: [
    requiredRule
  ], responsibilities: [requiredRule], workPlan: [requiredRule], basicInformation: [requiredRule], workSituation: [requiredRule],
})
const table = reactive({
  tableData: [],
  name: '强检器具信息列表',
  columns: [
    {
      label: "序号",
      type: "index",
      width: '70px'
    },
    {
      label: "器具名称",
      field: "name",
    },
    {
      label: "用途",
      field: "email",
    },
    {
      label: "是否强检",
      field: "email",
    },
    {
      label: "数量",
      field: "email",
    },
    {
      label: "检定日期",
      field: "email",
    },
    {
      prop: '',
      label: "检定有效期",
      field: "email",
    },
    {
      prop: '',
      label: "使用状态",
      field: "email",
    },
  ],
  totalRecordCount: 10,
  sortable: {},
});
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
}

.formtitle {
  color: #4688f6;
  padding-bottom: 2px;
  padding: 12px;
  border-bottom: 2px solid #4688f6;
}

.para {
  padding: 12px;
}

.box {
  display: flex;
  justify-content: space-around;
  height: 50px;
  background-color: #4688f6;
  align-items: center;
  margin: 12px;
  color: white;
}

::v-deep .fc-form-item {
  margin-top: 12px !important;
}

::v-deep .tablecustom {
  padding: 0;
}

.content {
  display: flex;
  flex-wrap: wrap;
  margin-right: 24px;
  background-color: white;

  ::v-deep .el-form-item__label {
    width: 6rem !important;
    font-size: 14px;
  }

  ::v-deep .el-form-item__content {
    width: 10rem;
  }

  // ::v-deep .el-form-item {
  //   width: 23%;
  //   margin-right: 12px;
  // }
}

.button {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
</style>
